<template>
	<view class="boxStap titleName">
		<view class="titleNav">
			<view class="topBox">
				<view class="selectBox">
					<label class="boxRigth">售后类型</label>
					<uni-data-select :clear="false" v-model="typeValue" :localdata="range"
						@change="change"></uni-data-select>
				</view>
				<view class="selectBox mrtop" v-if="moneyValue">
					<label class="boxRigth">补偿金额</label>
					<input v-model="moneyValue" class="uni-input" type="number" disabled />
				</view>
			</view>
			<view class="boxTop">
				<view class="boxBottom">
					<label class="boxRigth">问题描述：</label>
				</view>
				<view class="selectBox">
					<textarea maxlength="60" v-model="msg" class="boxArea" placeholder="仅限60个汉字" />
				</view>
			</view>
		</view>


		<view class="boxFooder">
			<view class="nameBox">上传凭证（最多三张）</view>
			<cc-imgPreDelUpload :class="{'imgPreDelUpload':imageList.length>0?false:true}" @update="update" :count="6"
				:imageList="imgList"></cc-imgPreDelUpload>
		</view>
		<view class="boxFlex">
			<button size="mini" class="sfy" @click="saveData()">按钮</button>

		</view>
	</view>
</template>
<script>
	import {
		setPayFn,
		submitAfter
	} from "@/request/api.js";
	import MyMinix from '@/utils/util.js';
	export default {

		data() {
			return {
				imgList: [],
				typeValue: "",
				msg: "",
				range: [],
				orderId: "",
				moneyValue: "",
				imageList: [],
				sumbObj: {},
			}
		},
		onLoad(option) {
			let that = this
			that.orderId = option.goodId
			console.log(option, 'option');
			that.setPayFnl()
		},
		methods: {
			//获取下拉数数据以及赔偿、退还金额
			async setPayFnl() {
				let res = await setPayFn({
					method: "GET",
					data: {
						orderId: this.orderId
					}
				})
				if (res.code == '200') {
					this.range = res.result
					this.range.forEach(item => {
						item['text'] = item.title
					})
					console.log(this.range, 'this.range');
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			},
			update(e) {
				console.log(e, 'eeee');
				this.imageList = e
			},
			change(e) {
				this.moneyValue = e
				this.range.forEach(item => {
					if (e == item.value) {
						this.sumbObj = item
					}
				})
			},
			async saveData() {
				let that = this
				if (!that.typeValue) {
					return uni.showToast({
						title: '请选择售后类型！',
						icon: "none",
					});
				} else if (!that.msg) {
					return uni.showToast({
						title: '请输入问题描述！',
						icon: "none",
					});
				} else if (that.imageList.length == 0) {
					return uni.showToast({
						title: '请上传图片！',
						icon: "none",
					});
				}
				let res = await submitAfter({
					method: "POST",
					data: {
						orderId: that.orderId,
						afterSaleItemId: that.sumbObj.id,
						afterSaleItemTitle: that.sumbObj.title,
						value: that.sumbObj.value,
						notes:that.msg,
						imageUrl: that.imageList.join(",")
					}

				})
				if (res.code == '200') {
					uni.showToast({
						title: res.result.msg,
						icon: "success",
						duration: 500,
					});
					setTimeout(function() {
						MyMinix.goToUrl('/pages/myPage/stepsPage/stepsPage?afterSaleId=' + res.result
							.afterSaleId);
					}, 500);
					console.log(res, 'this.range');
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			},
			onUploadChange() {},
			goUploadClick() {
				console.log(this.imgList, 'this.imgList');
				if (this.imgList.length < 1) {

					uni.showModal({
						title: '温馨提示',
						content: '请上传图片'
					})
					return;
				}
				console.log('图片上传数组 = ' + JSON.stringify(this.imgList));

				// 服务器地址上传地址 仅为示例，非真实的接口地址
				let baseUrl = "http://gzcc.com/cc//appSc/up"

				uni.showLoading({
					title: '上传中'
				})
				const uploadTask = uni.uploadFile({
					url: baseUrl, //仅为示例，非真实的接口地址
					files: this.imgList, //请求图片数组
					formData: {}, //请求参数
					success: (uploadFileRes) => {

						uni.hideLoading();
						console.log('上传成功 = ' + uploadFileRes.data);
					}
				});
				uploadTask.onProgressUpdate((res) => {

					if (typeof(res.progress) != String) {
						res.progress = '0';
					}
					// 此处为了模拟上传进度
					uni.showLoading({
						title: '上传进度: ' + res.progress + '%'
					})
					console.log('上传进度' + res.progress);
					console.log('已经上传的数据长度' + res.totalBytesSent);
					console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);


				});
			}
		},
	}
</script>
<style lang="scss" scoped>
	.boxStap {
		height: 100vh;
		padding: 30rpx;
		background-color: #f6f6f6;
		box-sizing: border-box;

		.titleNav {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 2rpx solid #eeeeee;
			box-shadow: 0rpx 0rpx 12rpx #0000001a;
		}

		.topBox {
			border-bottom: 2rpx solid #eeeeee;
			padding-bottom: 28rpx;
		}

		.selectBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 9999;
		}
	}

	uni-data-select {
		width: 50vw;
	}

	.boxRigth {
		padding-right: 20rpx;
		font-size: 30rpx;
	}

	.uni-input {
		// border: 1px solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 4px;
		height: 80rpx;
		width: 50vw;
		padding-left: 15rpx;
	}

	.boxArea {
		border: 1px solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 4px;
		height: 250rpx;
		width: 100%;
		padding: 15rpx;
	}

	.boxFlex {
		display: flex;
		justify-content: center;
		align-items: center;

		.sfy {
			margin-top: 30rpx;
			width: 630rpx;
			height: 84rpx;
			border-radius: 42px;
			background: #eb5b1e;
			color: #ffffff;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;
		}
	}

	.imgPreDelUpload {
		display: flex;
		z-index: -1;
	}

	.mrtop {
		margin-top: 28rpx;
	}

	.boxTop {
		margin-top: 30rpx;

		.boxBottom {
			margin-bottom: 20rpx;
			color: #232323;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
		}
	}

	.boxFooder {
		background-color: #fff;
		width: 100%;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 12rpx #0000001a;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.nameBox {
		color: #232323;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;

	}

	/deep/ .uni-stat__select .uni-select {
		border: 0;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
	}
	// uni-data-select {
	// 	font-family: PingFang SC;
	// 	font-weight: 500;
	// 	font-size: 32rpx;
	// }
</style>